<template>
	<div class="home-header">
		<div class="header-top">
			<div class="header-left">
				<img src="../assets/img/logo.png">
			</div>
			<div class="header-right">
	    	<span class="icon iconfont" :class="{'icon-daohang' : btnShow, 'icon-x' : !btnShow}" @click="navClick"></span>
			</div>
		</div>
		<div class="header-bottom">
			<img :src="bannerUrl">
		</div>
	</div>
</template>

<script>
export default {
  name: "HomeHeader",
  props: ["bannerUrl"],
  data() {
    return {
      btnShow: true,
      bannerImg: require("../assets/img/banner.jpg")
    };
  },
  methods: {
    navClick: function() {
      this.btnShow = !this.btnShow;
      this.$emit("navBtn", this.btnShow);
    }
  }
};
</script>

<style lang="stylus" scoped>
.home-header
	width 100%
	.header-top
		width 100%
		height .89rem
		display flex
		justify-content space-between
		.header-left
			width 4.5rem
			padding-left .17rem
			display flex
			align-items center
			img
				width 4.27rem
				height .41rem 

		.header-right
			padding-right .17rem
			display flex
			align-items center
			.icon-daohang
				font-size .43rem
				color #2f2f2f
				margin-top -0.06rem
			.icon-x
				font-size .33rem
				color #2f2f2f
	.header-bottom
		width 100%
		img
			width 100%
			display block
</style>
